<template>
	<view class="container" id="adoptApplication">
		<!-- <view class="applocation_title" @click="copy(msg.phone)">手机号：{{ msg.phone }}</view> -->
		<!-- <view class="applocation_title" @click="copy(msg.wx)">微信号：{{ msg.wx }}</view> -->
		<!-- <view style="color: #FC8F8F;text-decoration:underline;font-size: 34rpx;margin-top: 50rpx;" @click="openMz">免责声明</view> -->
		<!-- 领养流程 -->
		<view class="applocation_title">领小咪-猫咪领养流程：</view>
		<view class="applocation_txt">
			<view>1 填写此猫咪领养申请表</view>
			<view>
				2 阅读领养猫咪所需的条件以及相关服务
				<text style="font-size: 28rpx;color: #FC8F8F;font-weight: 700;margin-left: 10rpx;"
					@click="downLoadFile">点击查看</text>
			</view>
			<view>3 关注领小咪公众号，并在导航条添加客服微信号</view>
			<image class="code-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/liaoxmerweima.jpg"
				mode="" @click="lookPic"></image>
			<!-- <view>Ps：猫咪身份证号在领养详情页可以复制</view> -->
			<!-- <view style="color: #FC8F8F;text-decoration:underline;font-size: 34rpx;" @click="openMz">免责声明</view> -->
		</view>
		<!-- 信息填写 -->
		<view class="applocation_message">
			<view class="mes_title">
				<text>领小咪</text>
				<text>猫咪领养申请</text>
			</view>
			<view class="mes_input"><input type="text" placeholder="您的姓名" placeholder-style="color:#999999"
					v-model="params.name" /></view>
			<picker @change="bindSex" :value="sexIndex" :range="sex" class="cm_input">
				<view class="mes_input"><input type="text" placeholder="性别" placeholder-style="color:#999999"
						disabled="true" :value="sex[sexIndex]" /></view>
			</picker>
			<view class="mes_input"><input type="text" placeholder="职业" placeholder-style="color:#999999"
					v-model="params.job" /></view>
			<view class="mes_input"><input type="text" placeholder="手机" maxlength="11" placeholder-style="color:#999999"
					v-model="params.phone" /></view>
			<view class="mes_input"><input type="text" placeholder="微信ID" placeholder-style="color:#999999"
					v-model="params.wx" /></view>
			<view class="mes_input" @tap="openAddres">
				<input type="text" placeholder="所在地址" placeholder-style="color:#999999" :value="address"
					disabled="true" />
				<icon class="icon_xx"></icon>
			</view>
			<view class="mes_input mes_textarea">
				<textarea style="height: 100rpx;" placeholder-style="color:#999999" placeholder="详细地址"
					v-model="params.address" v-if="placeholder" />
			</view>
			<view class="mes_input mes_textarea"><textarea placeholder-style="color:#999999" placeholder="领养理由"
					v-model="params.why" v-if="placeholder" /></view>
			<view class="reminder">温馨提示：领小咪登记表是为了提供大家更优质的服务体验；我们不会将您的信息提供给任何第三方，谢谢您的支持和信任。</view>
		</view>
		<!-- 发布按钮 -->
		<button class="submit_btn" @click="openStatement">领养</button>
		<!-- 背景图片 -->
		<image class="icon_lysq" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-lysq.png" mode="">
		</image>
		<!-- 省市区选择 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="[0, 0, 0]" @onConfirm="onConfirm" themeColor="#007AFF">
		</simple-address>
		<!-- 免责声明弹出框 -->
		<uni-popup ref="popup" type="center">
			<view class="pop_statement">
				<image src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon_mmly.png" mode=""
					class="state_bg"></image>
				<image src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-mmly-close.png" mode=""
					@click="closeStatement" class="state_close"></image>
				<view class="statement_title">免责声明</view>
				<scroll-view scroll-y="true" style="height: 620rpx;">
					<view class="statement_stit">关于我们</view>
					<view class="statement_text">
						领小咪是nabercat生态中一个专注猫咪领养的作品。我们希望和大家一起努力让更多的猫咪有属于自己的家，有主人爱它。您的参与和分享都是对我们的强大支持！
					</view>
					<view class="statement_stit">关于安全提醒</view>
					<view class="statement_text">
						如果您在领养的过程中，收到了领养发布者的收费要求。请注意自我防范，以免上当受骗。如果您在过程中遇到此类情况，请及时举报并通知我们，领小咪也会及做出相应的防范处理。
					</view>
					<view class="statement_stit">结束语</view>
					<view class="statement_text">
						以上担保领养服务声明会根据实际情况做出继续优化调整，您可以进行拍照保留作为法律纠纷参考依据，且您在此页面提交领养猫咪申请的同时也代表默并且接受此免责声明。谢谢您的观看！如果您对我们有任何的建议，请联系我们。我们希望和大家一起把领小咪做的更好！
					</view>
				</scroll-view>
				<view class="statement_btn_box"><button class="statement_btn" @click="closeStatement">我知道了</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const app = getApp();
	import simpleAddress from '@/components/simple-address/simple-address.vue'; //省市区选择
	import uniPopup from '@/components/uni-popup/uni-popup.vue'; //弹出框
	import {
		lxmAdopt,
		getInfo
	} from '@/api/index.js';
	export default {
		components: {
			simpleAddress,
			uniPopup
		},
		data() {
			return {
				address: '', //省市区
				switch: true, //节流
				placeholder: false,
				sex: ['男', '女'], //性别选择
				sexIndex: -1, //性别选择索引
				params: {
					openid: '', //用户id
					catid: '', //商品id
					name: '', //姓名
					phone: '', //手机号
					wx: '', //微信id
					pro: '', //省
					city: '', //市
					district: '', //区
					address: '', //详细地址
					sex: '', //1,2
					job: '', //字符串
					why: '' //字符串
				}, //接口请求
				msg: {}
			};
		},
		methods: {
			// 点击查看
			downLoadFile() {
				uni.downloadFile({
					url: 'https://nabercat.com/领小咪猫咪领养须知.docx', //仅为示例，并非真实的资源
					success(res) {
						// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
						let filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				})
			},
			// 获取用户信息
			async getInfo() {
				const res = await getInfo({
					goods_id: this.params.catid
				});
				this.msg = res;
			},
			// 复制
			copy(value) {
				wx.setClipboardData({
					data: value,
					success(res) {
						wx.getClipboardData({
							success(res) {
								console.log(res.data); // data
							}
						});
					}
				});
			},
			// 放大图片
			lookPic() {
				uni.previewImage({
					urls: ['https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/liaoxmerweima.jpg'],
					current: 0
				});
			},
			// 省市区选择
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1];
				this.$refs.simpleAddress.open();
			},

			onConfirm(e) {
				this.address = e.label;
				this.params.city = e.labelArr[1];
				this.params.pro = e.labelArr[0];
				this.params.district = e.labelArr[2];
			},

			// 提交领养
			openStatement() {
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return false;
				}
				if (this.params.name == '' || this.params.phone == '' || this.params.wx == '' || this.params.city == '' ||
					this.params.address == '') {
					uni.showToast({
						title: '请完善信息',
						duration: 1500,
						icon: 'none'
					});
					return false;
				}
				if (this.params.city == '全国') {
					uni.showToast({
						title: '地址请选择省市区',
						duration: 1500,
						icon: 'none'
					});
					return false;
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.params.phone)) {
					uni.showToast({
						title: '手机号码格式有误，请重填',
						duration: 1500,
						icon: 'none'
					});
					return false;
				}
				if (/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi.test(this.params.wx)) {
					uni.showToast({
						title: '微信id不能有中文',
						duration: 1500,
						icon: 'none'
					});
					return false;
				}
				if (this.params.why.length < 15) {
					uni.showToast({
						title: '领养理由不能少于15字',
						duration: 1500,
						icon: 'none'
					});
					return false;
				}
				if (!this.switch) {
					return false;
				}
				this.switch = false;
				lxmAdopt(this.params).then(res => {
					this.switch = true;
					console.log(res);
					uni.showToast({
						title: res,
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				});
			},

			// 性别选择
			bindSex(e) {
				this.sexIndex = e.target.value;
				this.params.sex = parseInt(e.target.value) + 1;
			},

			// 关闭弹出框
			closeStatement() {
				this.$refs.popup.close();
				this.placeholder = true;
			},
			// 打开免责申请
			openMz() {
				this.$refs.popup.open();
			}
		},
		onLoad(options) {
			this.$refs.popup.open();
			this.params.catid = options.id;
			this.getInfo();
		},
		onShow() {
			this.params.openid = uni.getStorageSync('openid');
		},
		onReady() {}
	};
</script>

<style lang="scss">
	#adoptApplication {
		position: relative;
		height: 100%;
		box-sizing: border-box;

		.icon_lysq {
			width: 210rpx;
			height: 180rpx;
			position: absolute;
			top: 20rpx;
			right: 180rpx;
			z-index: -1;
		}

		.applocation_title {
			color: #333333;
			font-weight: 500;
			margin-bottom: 12rpx;
		}

		.applocation_txt {
			font-size: 24rpx;
			color: #999999;
			line-height: 42rpx;
			margin-bottom: 52rpx;
		}

		.applocation_message {
			padding: 52rpx 32rpx 36rpx;
			background: linear-gradient(180deg, #ffded0 0%, #f4e7e1 100%);
			border-radius: 18rpx;
			margin-bottom: 88rpx;

			.mes_title {
				font-size: 36rpx;
				color: #333333;
				font-weight: 600;
				margin-bottom: 56rpx;

				&>text {
					display: block;
					text-align: center;
				}
			}

			.mes_input {
				padding: 0 52rpx;
				height: 88rpx;
				background: #ffffff;
				border-radius: 44rpx;
				border: 1rpx solid #979797;
				margin-bottom: 36rpx;
				font-size: 28rpx;
				position: relative;

				&>input {
					height: 100%;
				}

				.icon_xx {
					width: 26rpx;
					height: 16rpx;
					background: url(../../static/image/icon-lysm-xx.png) no-repeat;
					background-size: cover;
					position: absolute;
					right: 52rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.mes_textarea {
				padding: 36rpx 52rpx;
				height: auto;

				&>textarea {
					width: 100%;
					height: 208rpx;
				}
			}

			.reminder {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.submit_btn {
			width: 100%;
			height: 80rpx;
			padding: 0;
			line-height: 80rpx;
			background: rgba(252, 95, 95, 0.7);
			box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(252, 143, 143, 0.32);
			border-radius: 40rpx;
			color: #ffffff;
			margin-bottom: 92rpx;
		}

		.pop_statement {
			padding: 32rpx 32rpx 36rpx;
			width: 650rpx;
			height: 900rpx;
			box-sizing: border-box;
			background: #f8f8f8;
			border-radius: 16rpx;
			position: relative;
			color: #333333;

			.statement_title {
				font-size: 52rpx;
				font-weight: 600;
				margin-bottom: 36rpx;
				text-align: center;
			}

			.statement_stit {
				margin-bottom: 8rpx;

				&:nth-of-type(1) {
					// color: #FC8F8F;
				}
			}

			.statement_text {
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 24rpx;

				&:nth-of-type(1) {
					// color: #FC8F8F;
				}
			}

			.statement_btn_box {
				padding: 90rpx 32rpx 36rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
				border-radius: 16px;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;

				.statement_btn {
					padding: 0;
					margin: 0;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					color: #ffffff;
					font-size: 36rpx;
					font-weight: 600;
					text-align: center;
					background: rgba(252, 95, 95, 0.7);
					box-shadow: 0px 3px 9px 0px rgba(252, 143, 143, 0.32);
					border-radius: 40px;
				}
			}

			.state_bg {
				width: 276rpx;
				height: 145rpx;
				position: absolute;
				left: 50rpx;
				top: -130rpx;
			}

			.state_close {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				bottom: -90rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.code-img {
		width: 160rpx;
		height: 160rpx;
	}
</style>
